<template>
  <view class="goods-box">


    <!-- 商品分类栏 -->
    <goods-classify v-if="props.classify.length > 0" :classify="props.classify"
      @choose-classify="chooseClassify"></goods-classify>


    <view class="goods-content">

      <view class="goods-content-item" v-for="(item, index) in props.list" :key="item.commodity_id"
        :class="{ 'animationGoods': animationIndex === index }"
        @click="toDeatil(index, (item.commodity_inventory > 0 ? item.commodity_id : ''))">
        <view v-if="animationLoation" style="position: relative;">
          <view>
            <!-- 商品封面 -->
            <image class="goods-content-top-image" :src="item.commodity_image" mode="scaleToFill" />

            <!-- 商品信息 -->
            <text class="goods-content-msg">{{ item.commodity_msg }}</text>

            <!-- 商品信息 -->
            <view class="goods-price">
              <view>
                <text>￥{{ item.commodity_price }}</text>
                <text class="goods-discount" v-if="item.commodity_discount > 0.00">￥{{ item.commodity_discount }}</text>
              </view>

              <!-- 购物车图标 -->
              <image src="@/components/goods/images/shopping-cart.png" mode="scaleToFill" />
            </view>

            <!-- 是否还有货源 -->
            <view class="goods-warehouse" v-if="!(item.commodity_inventory > 0)"></view>

          </view>

        </view>
      </view>

      <!-- 加载时显示的盒子 -->
      <view v-show="!animationLoation" style="min-height: 420rpx;background-color: #e9e7e7;">

      </view>

    </view>
  </view>
</template>

<script lang="ts" setup>
import GoodsClassify from "../goodsClassify/GoodsClassify.vue";
import type { GoodsList, ChooseClassifyData } from "@/config/data/data"
import {
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onUnmounted,
  ref,
  defineProps,
  defineEmits,
} from 'vue'


//接受上级的商品列表数据
const props = defineProps<{
  list: GoodsList[],
  classify: string[]
}>();

const emit = defineEmits(['chooseClassify']);

//点击选中商品列表分类事件
const chooseClassify = (data: ChooseClassifyData) => {
   emit('chooseClassify',data);
};

//商品触发的动画下标
const animationIndex = ref(-1);
//商品动画消除定时器
const animationTimer = ref();
//选中中商品事件,触发动画
const toDeatil = (index: number, path: string = '') => {
  if (animationTimer.value) {
    animationIndex.value = -1;
    clearTimeout(animationTimer.value)
  }
  animationIndex.value = index;
  animationTimer.value = setTimeout(() => {
    animationIndex.value = -1;
  }, 1600);

  if (!path) {
    uni.showToast({
      title: "已售罄",
      icon: 'none',
      time: 1500,
      duration: 1500,
      mask: true,
    })
    return;
  }
  uni.navigateTo({
    url: '../../subpkg/goods_detail/goods_detail?id=' + path,
  });
};

//加载动画的是否显示
const animationLoation = ref(false);


// 组件周期函数--监听组件挂载完毕
onMounted(() => {
  setTimeout(() => {
    animationLoation.value = true;
  }, 200)


});

// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => { });

// 组件周期函数--监听组件数据更新之后
onUpdated(() => { });

// 组件周期函数--监听组件激活(显示)
onActivated(() => { });

// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => { });

// 组件周期函数--监听组件销毁之前
onUnmounted(() => { });
</script>

<style scoped lang="scss">
view,
text {
  word-break: break-all;
}

.goods-box {
  width: 100%;


  .goods-classify {
    position: sticky;
    top: 0;
    width: 100%;
    font-size: 30rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: $uni-bg-color-mask;
    height: 80rpx;
    background-color: $uni-box-color;
    z-index: 9;

    text {
      position: relative;
      min-width: 80rpx;
      text-align: center;
      color: $uni-text-color;
    }

    .goods-classify-choose {
      color: $uni-color-error;
    }

    .goods-classify-choose::after {
      position: absolute;
      bottom: -10rpx;
      left: 0;
      content: "";
      display: inline-block;
      width: 100%;
      height: 4rpx;
      border-left: 50%;
      border-right: 50%;
      background-color: $uni-color-error;
      animation: middle .2s ease-out 0s 1 forwards;
    }
  }



  .goods-content {
    display: grid;
    grid-template-columns: repeat(2, 320rpx);
    justify-content: space-around;
    justify-items: center;
    /* 设置列间距 */
    row-gap: 10px;

    margin-top: 20rpx;
    padding: 0 20rpx;

    .animationGoods {
      animation: zoom 1.5s ease-in-out 0s 1 forwards !important;
    }

    .goods-content-item {
      width: 100%;
      padding: 15rpx;
      min-height: 210rpx;
      background-color: $uni-box-color;
      border-radius: 15rpx;
      box-shadow: 0 5rpx 10rpx rgb(206, 205, 205);

      .goods-content-msg {
        font-size: 25rpx;
        color: $uni-text-color;
        font-weight: 600;
        text-align: left;
        min-height: 50rpx;
        margin: 15rpx 0 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; //设置行数
        overflow: hidden; //超出隐藏
      }

      .goods-content-top-image {
        width: 100%;
        height: 300rpx;
      }

      .goods-price {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60rpx;
        line-height: 60rpx;

        text {
          font-size: 28rpx;
          color: $uni-color-error;
        }

        image {
          width: 30rpx;
          height: 30rpx;
        }

        .goods-discount {
          text-decoration: line-through;
          color: $uni-bg-color-grey;
          font-size: 21rpx;
          color: $uni-text-color-grey;

        }

      }

      .goods-warehouse {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #15141470;
        display: flex;
        justify-content: center;
        align-items: center;

        &::after {
          position: absolute;
          content: "";
          top: 50%;
          left: 50%;
          width: 150rpx;
          height: 150rpx;
          transform: translateX(-50%) translateY(-50%);
          border: 6rpx solid #fff;
          border-radius: 50%;
        }

        &::before {
          position: absolute;
          content: "已售罄";
          top: 50%;
          left: 50%;
          width: auto;
          height: auto;
          color: #fff;
          font-size: 32rpx;
          transform: translateX(-50%) translateY(-50%) rotateZ(-40deg);
        }

      }

    }
  }





  //从中间向两边展开
  @keyframes middle {
    0% {
      transform: scaleX(0);
    }

    100% {
      transform: scaleX(1);
    }

  }

  @keyframes zoom {
    0% {
      transform: scale(0.9);
    }

    30% {
      transform: scale(1.03);
    }

    50% {
      transform: scale(1);
    }

    70% {
      transform: scale(1.02);
    }

    100% {
      transform: scale(1);
    }
  }


}
</style>